import React, { Component } from 'react'
import Style from './index.scss'


/**
 * 弹窗说明
 */
export default class WAlert extends Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    close(i) {
    	console.log(i)
        this.props.onClose(i);
    }

    render() {
		/*
		 * 0: 已购买车务卡说明
		 * 1: 未购买车务卡说明
		 * 2：加急处理 业务使用说明
		 */
        const alerts = [<div className={Style.wAlert} ref="alertBox">
			<div className={Style.wAlertBg}></div>
			<div className={Style.wAlertBody + " " + Style.flexV}>

				<div className={Style.wAlertContent + " " + Style.flex1}>
					<p>1、交强险样本如下所示（不同保险公司的保险单部分内容和样式可能不一致，以具体保险公司的为准）。</p>
					<p>2、请注意保单的有效期，年检业务办理的时间必须在保险的有效期间内。</p>
					<img src="./images/weixin-icon.png" />
				</div>
				<div onClick={() => this.close(0)} className={Style.wAlertFooter}><span>已读,</span><span>确认</span></div>
			</div>
			</div>,
			<div className={Style.wAlert} ref="alertBox">
				<div className={Style.wAlertBg}></div>
				<div className={Style.wAlertBody + " " + Style.flexV}>

					<div className={Style.wAlertContent + " " + Style.flex1}>
						<p>1、车船税样本如下所示（不同地区的车船税内容和样式可能不一致，以当地的为准）。</p>
						<p>2、部分地区在办理交强险时，会一并办理车船税。请检查您的交强险保单，如已办理，则无需单独提供。</p>
						<img src="./images/select-true.png" />
					</div>
					<div onClick={() => this.close(1)} className={Style.wAlertFooter}><span>已读,</span><span>确认</span></div>
				</div>
			</div>,
			<div className={Style.wAlert} ref="alertBox">
				<div className={Style.wAlertBg}></div>
				<div className={Style.wAlertBody + " " + Style.flexV}>

					<div className={Style.wAlertContent + " " + Style.flex1}>
						<p>1、交强险副本原件。</p>
						<p>2、车船税发票原件（如交强险含车船税，则无需提供车船税发票）。</p>
						<p>3、车主身份证复印件（正反面）。</p>
						<p>4、车辆行驶证原件正副本。</p>
						<p>5、车辆登记证书复印件。</p>
						<img src="./images/prompt-icon.png" />
					</div>
					<div onClick={() => this.close(2)} className={Style.wAlertFooter}><span>已读,</span><span>确认</span></div>
				</div>
			</div>,
			<div className={Style.wAlert} ref="alertBox">
				<div className={Style.wAlertBg}></div>
				<div className={Style.wAlertBody + " " + Style.flexV}>

					<div className={Style.wAlertContent + " " + Style.flex1}>
						<p>1、交强险副本原件。</p>
						<p>2、车船税发票原件（如交强险含车船税，则无需提供车船税发票）。</p>
						<p>3、车主身份证复印件（正反面）。</p>
						<p>4、车辆行驶证原件正副本。</p>
						<p>5、车辆登记证书复印件。</p>
						<img src="./images/prompt-icon.png" />
					</div>
					<div onClick={() => this.close(3)} className={Style.wAlertFooter}><span>已读,</span><span>确认</span></div>
				</div>
			</div>
        ]
        return (
			<div>
        {alerts[this.props.num]}
			</div>
        )
    }
}

WAlert.defaultProps = {
    num : 1 //0：已购买车务卡说明、1：未购买车务卡说明、2：加急处理
}